<template>
<view class="">
	<view class="btn_input">
		<!-- 地址弹窗下拉选择 -->
		<view class="show_input" @click="onShow">
			<uni-icons type="bottom" size="14" class="icon_btn" color="rgb(153, 153, 153)"
				v-if="!addresValue"></uni-icons>
		</view>
		<!-- 清除 -->
		<uni-icons class="icon" size="24" type="clear" @click="clearValue" v-if="addresValue"
			color="#c0c4cc"></uni-icons>
		<!-- 地址 str -->
		<view class="input_p" v-if="!addresValue">
			请选择地址
		</view>
		<view class="input_val" v-else>
			{{addresValue}}
		</view>
		<!-- end -->
	</view>
	<uni-popup ref="popupRef" type='bottom' :safe-area="false" background-color="#fff">
		<view class="popup_main">
			<view class="lable_top">
				选择地址
				<uni-icons class="icon" color="#aaa" @click="popupRef.close()" size="22" type="closeempty"></uni-icons>
			</view>
			<view class="segmented-control">
				<view v-for="(item,index) in currentTitle" class="sele_item"
					:style="{'border-bottom':currentIndex==index? '4rpx solid #007cff':'4rpx solid transparent'}"
					:key="index" @click="onClickItem(index)">
					{{item}}
				</view>
			</view>
			<view class="content">
				<view v-show="currentIndex === 0">
					<view class="item_name" v-for="(item,index) in provinceList" :key="index"
						@click="nodeClick(item,0)">
						<span>{{item.name}}</span><uni-icons v-if="item.name==address.province" color="#007cff"
							type="checkmarkempty"></uni-icons>
					</view>
				</view>
				<view v-show="currentIndex === 1">
					<view class="item_name" v-for="(item,index) in cityList" :key="index" @click="nodeClick(item,1)">
						<span>{{item.name}}</span><uni-icons v-if="item.name==address.city" color="#007cff"
							type="checkmarkempty"></uni-icons>
					</view>
				</view>
				<view v-show="currentIndex === 2">
					<view class="item_name" v-for="(item,index) in areaList" :key="index" @click="nodeClick(item,2)">
						<span>{{item.name}}</span><uni-icons v-if="item.name==address.area" color="#007cff"
							type="checkmarkempty"></uni-icons>
					</view>
				</view>
				<view v-show="currentIndex === 3">
					<view class="item_name" v-for="(item,index) in townList" :key="index" @click="nodeClick(item,3)">
						<span>{{item.name}}</span>
						<uni-icons v-if="item.name==address.town" color="#007cff" type="checkmarkempty">
						</uni-icons>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</view>
	
</template>

<script lang="ts" setup>
	import { ref, onMounted, toRefs ,watch} from 'vue'
	import apiAddress from '@/util/api/address.js'
	const provinceList = ref([])//省级列表
	const cityList = ref([])//市级列表
	const areaList = ref([])//区级列表
	const townList = ref([])//镇级列表
	const popupRef = ref()//弹窗
	const addresValue = ref('')//地址
	const currentIndex = ref(0)
	const currentTitle = ref(['请选择'])
	const address = ref({
		"province": "",//省
		"city": "",//市
		"area": "",//区
		"town": "",//镇
	})
	const props = defineProps({
		//子组件接收父组件传递过来的值
		address_obj: Object//接收地址对象
	})
	//使用父组件传递过来的值
	const { address_obj } = toRefs(props)
	let emit=defineEmits(['change'])
	watch(()=>address_obj.value?.area,(n)=>{
		// 地址回显
		if (address_obj.value) {
			provinceList.value.filter(async o => {
				if (address_obj.value.province == o.name) {
					await nodeClick(o, 0)
					cityList.value = o.children
					cityList.value.filter(async c => {
						if (address_obj.value.city == c.name) {
							await nodeClick(c, 1)
							areaList.value = c.children
							areaList.value.filter(async a => {
								if (address_obj.value.area == a.name) {
									await nodeClick(a, 2)
								}
							})
						}
					})
				}
			})
		}
	})
	onMounted(async () => {
		uni.showLoading({
			mask: true,
			title: '加载中...'
		})

		await apiAddress.address().then(res => {
			if (res.code == 20000) {
				provinceList.value = res.data.rows
			}
		})
		uni.hideLoading()
		// 地址回显
		if (address_obj.value) {
			provinceList.value.filter(async o => {
				if (address_obj.value.province == o.name) {
					await nodeClick(o, 0)
					cityList.value = o.children
					cityList.value.filter(async c => {
						if (address_obj.value.city == c.name) {
							await nodeClick(c, 1)
							areaList.value = c.children
							areaList.value.filter(async a => {
								if (address_obj.value.area == a.name) {
									await nodeClick(a, 2)
								}
							})
						}
					})
				}
			})
		}
	})
	// 弹出层弹出时触发
	const onShow = async () => {
		popupRef.value.open()
	}
	// 点击标题
	const onClickItem = (val) => {
		currentIndex.value = val
	}
	// 节点被点击时触发
	const nodeClick = async (val, num) => {
		if (num == 2) {
			address.value.area = val.name
			currentTitle.value[currentIndex.value] = val.name//标题赋值

			let arr = []
			for (let i in address.value) {
				if (i != 'town') {
					arr.push(address.value[i])
				}
			}
			addresValue.value = arr.join('/')

			popupRef.value.close()
		} else if (num == 1) {
			cityList.value.filter(async c => {
				if (val.name == c.name) {
					areaList.value = c.children
				}
			})
			if (address.value.city != val.name) {
				currentTitle.value = currentTitle.value.splice(0, 2)//删除子集重新赋值
				address.value.city = val.name
				currentTitle.value[currentIndex.value] = val.name//标题赋值
				// 显示下一级
				currentIndex.value = 2
				currentTitle.value[currentIndex.value] = '请选择'
			} else {
				// 显示下一级
				currentIndex.value = 2
			}
		} else if (num == 0) {
			provinceList.value.filter(async o => {
				if (val.name == o.name) {
					cityList.value = o.children
				}
			})
			if (address.value.province != val.name) {
				currentTitle.value = currentTitle.value.splice(0, 1)//删除子集重新赋值
				address.value.province = val.name
				currentTitle.value[currentIndex.value] = val.name//标题赋值
				// 显示下一级
				currentIndex.value = 1
				currentTitle.value[currentIndex.value] = '请选择'
			} else {
				// 显示下一级
				currentIndex.value = 1
			}
		}
		emit('change',address.value)
	}

	// 清除
	const clearValue = () => {
		addresValue.value = ''
		address.value = {
			"province": "",//省
			"city": "",//市
			"area": "",//区
			"town": "",//镇
		}
		currentIndex.value = 0
		currentTitle.value = ['请选择']
		emit('change',address.value)
	}
	defineExpose({ address })
</script>

<style lang="scss" scoped>
	.btn_input {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.input_p {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			height: 70rpx;
			line-height: 70rpx;
			padding-left: 20rpx;
			color: #999;
			font-size: 28rpx;
		}

		.input_val {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 84%;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			height: 70rpx;
			line-height: 70rpx;
			padding-left: 20rpx;
			font-size: 28rpx;
		}

		.show_input {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 70rpx;
			z-index: 3;
			display: flex;
			flex-direction: row-reverse;
			align-items: center;

			.icon_btn {
				padding-right: 10rpx;
			}
		}

		.icon {
			position: absolute;
			right: 10rpx;
			z-index: 4;
			top: calc(50% - 16rpx);
			transform: translateY(50%);
			color: #c0c4cc;
		}
	}

	.popup_main {
		background-color: #fff;
		height: 70vh;
		border-radius: 40rpx 40rpx 0 0;
		width: 100%;
		position: relative;

		.lable_top {
			text-align: center;
			line-height: 100rpx;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			height: 100rpx;
			font-size: 28rpx;
			font-weight: bold;

			.icon {
				position: absolute;
				right: 40rpx;
			}
		}

		.segmented-control {
			border-bottom: 1rpx solid #eee;
			display: flex;
			padding: 0 40rpx;

			.sele_item {
				margin-right: 24rpx;
				padding-bottom: 12rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.content {
			padding: 20rpx 40rpx;
			height: 80vh;
			overflow-y: auto;

			.item_name {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f4f4f4;
				font-size: 28rpx;

				&:last-child {
					margin-bottom: 400rpx;
				}
			}
		}
	}
</style>